<template>
  <div class="app-container">
    <el-steps :active="active" align-center>
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="课程最终发布"></el-step>
    </el-steps>
    <el-form
      @submit.native.prevent
      label-position="right"
      label-width="120px"
      ref="form"
    >
    <el-form-item label="课程名称">
        {{ publishInfo.title }}
    </el-form-item>
    <el-form-item label="教师名称">
        {{ publishInfo.teacherName }}
    </el-form-item>
    <el-form-item label="科目名称">
        {{ publishInfo.parentSubjectName }} {{ publishInfo.subjectName }}
    </el-form-item>
    <el-form-item label="价格">
        {{ publishInfo.price }}
    </el-form-item>
    <el-form-item label="课时">
        {{ publishInfo.lessonNum }}
    </el-form-item>
    <el-form-item label="课程封面">
        <div class="block">
            <el-image :src="publishInfo.coverUrl"></el-image>
        </div>
    </el-form-item>
    <el-form-item label="课程简介">
        <div class="markdown-body">
            <VueMarkdown :source="publishInfo.description"></VueMarkdown>
        </div>
    </el-form-item>
      <el-form-item size="large">
        <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
        <el-button style="margin-top: 12px" @click="publish">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import subject from "@/api/edu/subject";
import teacher from "@/api/edu/teacher";
import course from "@/api/edu/course";
import VueMarkdown from 'vue-markdown'
import 'github-markdown-css/github-markdown.css'

export default {
  data() {
    return {
        publishInfo:{},
        courseId: this.$route.params.id,
        active: 2,
    };
  },
  components: {VueMarkdown},
  created() {
      this.getPublishInfo()
  },
  methods: {
      getPublishInfo() {
          course.getPublishInfo(this.courseId).then(res => {
              this.publishInfo = res.data.result;
          })
      },
    prev() {
      this.$router.push({ path: `/course/chapter/${this.courseId}` });
    },
    publish() {
        course.publish(this.courseId).then(res => {
            this.$message.success("发布成功")
            this.$router.push({ path: `/course/list` });
        })
    },
  },
};
</script>
<style>
</style>
